<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签到页面</title>
    <link rel="stylesheet" href="/main/css/style.css">
    <link rel="stylesheet" href="/main/css/qiandao_style.css">
    <meta name="viewport" content="width=640, user-scalable=no">
    <style>
        .sign_pop_item{
            width: 100%;
            height:100%;
            background-color: rgba(0,0,0,.8);
            position: relative;
        }
        .sign_pop_item .inner_bg{
            width: 480px;
            height:390px;
            background-color: #fff;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 10px;
            -webkit-border-radius: 10px;
            line-height: 2.0;
        }
        .sign_pop_item .inner_bg .close{
            width: 50px;
            height:50px;
        }
        .sign_pop_item .inner_bg p{
            width: 80%;
            margin: 25% auto;
            text-align: center;
            font-size: 36px;
            color: #009ce0;
        }
    </style>
</head>
<body>
<!--fixed remove-->
<section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
<div class="wrap_box">
    <!--装饰-->
    <span class="decorate">
			<em></em>
			<em></em>
		</span>
    <span class="decorate decorate_2">
			<em></em>
			<em></em>
		</span>
    <div class="qiandao-left">
        <!--<div class="qiandao-left-top clear"></div>-->
        <div class="current-date">{%$time%}</div>
        <div class="calendar"></div>
        <div class="qiandao-main" id="js-qiandao-main">
            <ul class="qiandao-list" id="js-qiandao-list">
            </ul>
        </div>
        <div class="sign_tips">
            <p>连续7天签到即可参加1次抽奖</p>
        </div>
    </div>
</div>
{%if $user.issign eq 0%}
<div class="just-qiandao qiandao-sprits" id="js-just-qiandao"></div>
{%else%}
<div class="just-qiandao qiandao-sprits actived"></div>
{%/if%}
<!-- 签到 layer start -->
<div class="qiandao-layer qiandao-active">
    <div class="sign_pop_item">
        <div class="inner_bg">
            <span class="close"></span>
            <p id="signtxt"></p>
        </div>
    </div>
</div>
<!-- 签到 layer end -->
<script src="/main/js/jquery-1.12.3.min.js"></script>

<script src="/main/js/common.js"></script>
<script>
    /**
     * 默认页面不可滑动,排行页面的滚动内容除外
     */
    var dateArray = [{%$user.signday|default:''%}] // 假设已经签到的

    var $dateBox = $("#js-qiandao-list"),
        $qiandaoBnt = $("#js-just-qiandao"),
        _html = '',
        _handle = true;


    $(window).load(function () {
        checkweichatevent();
        removeTopElement();
        touchEvent();
        var monthFirst =parseInt('{%$week%}'); //当月1号是星期几
        var totalDay = parseInt('{%$totalday%}'); //获取当前月的天数

        for (var i = 0; i < 42; i++) {
            _html += ' <li><div class="qiandao-icon"></div></li>'
        }
        $dateBox.html(_html) //生成日历网格

        var $dateLi = $dateBox.find("li");
        for (var i = 0; i < totalDay; i++) {

            $dateLi.eq(i + monthFirst).addClass("date" + parseInt(i + 1));
            for (var j = 0; j < dateArray.length; j++) {
                if (parseInt(i + 1) == dateArray[j]) {
                    $dateLi.eq(i + monthFirst).addClass("qiandao");
                }
            }
        } //生成当月的日历且含已签到

        $(".date{%$day%}").addClass('able-qiandao');
        {%if $user.issign eq 0%}
        $dateBox.on("click", "li", function() {
            if ($(this).hasClass('able-qiandao') && _handle) {
                $(this).addClass('qiandao');
                qiandaoFun();
            }
        }) //签到

        $qiandaoBnt.on("click", function() {
            if (_handle) {
                qiandaoFun();
            }
        }); //签到
        {%/if%}

        $("body").on("click", ".close-qiandao-layer", function() {
            $(this).parents(".qiandao-layer").fadeOut()
        });
        $(".sign_pop_item .close").on('click',closeModal);

        $("#js-qiandao-history").on("click", function() {
            openLayer("qiandao-history-layer", myFun);
        })
    });
    function myFun() {
        console.log(1)
    } //打开弹窗返回函数
    function openLayer(a, Fun) {
        $('.' + a).fadeIn(Fun)
    } //打开弹窗
    function qiandaoFun() {

        openLayer("qiandao-active", qianDao);
        _handle = false;
    }

    function qianDao() {
        $.ajax({
            type: "POST",
            url: "/api/dosign.json",
            data: {tk_name:"{%$tk_name%}",tk_value:"{%$tk_value%}"},
            dataType:'text',
            success: function (e) {
                $qiandaoBnt.addClass('actived');
                $("#signtxt").text(e)
                $(".date{%$day%}").addClass('qiandao');

            },
            error:function () {
                $("#signtxt").text('签到失败');
            }

        });



    }

    /**
     * 移除顶层元素
     */
    function removeTopElement() {
        $("section.fixed").remove();
    }

    function touchEvent(){
        $('body').on('touchmove', function (event) {
            event.preventDefault();
        });
    }

    /**
     * 关闭弹层
     */
    function closeModal(){
        $(".sign_pop_item").fadeOut();
    }


</script>
</body>
</html>
